<template>
    <div>
        <el-button type="text" @click="dialogFormVisible = true; operateType = 'save'" >添加商品</el-button>

        <el-dialog :visible.sync="dialogFormVisible" title="商品信息" @close="handleClose">
            <el-form :model="product">
                <el-form-item :label-width="formLabelWidth" label="商品编号">
                    <el-input v-model="product.id" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item :label-width="formLabelWidth" label="商品名称">
                    <el-input v-model="product.product_name" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item :label-width="formLabelWidth" label="商品图片">
                    <el-upload action="http://localhost:8080/upload" :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload" :show-file-list="false">
                        <img v-if="product.product_image" :src="product.product_image" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>

                <el-form-item :label-width="formLabelWidth" label="商品价格">
                    <el-input v-model="product.price" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item :label-width="formLabelWidth" label="商品类型">
                    <el-input v-model="product.product_type" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item :label-width="formLabelWidth" label="商品描述">
                    <el-input v-model="product.product_desc" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item :label-width="formLabelWidth" label="创建时间">
                    <el-date-picker v-model="product.create_time" type="datetime" placeholder="选择日期时间"
                        value-format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                </el-form-item>
                <el-form-item :label-width="formLabelWidth" label="商品品牌">
                    <el-input v-model="product.product_brand" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="handleSave">确定</el-button>
            </div>
        </el-dialog>

        <el-table :data="products" style="width: 100%">
            <el-table-column label="商品编号" min-width="100">
                <template slot-scope="scope">
                    <td>{{ scope.row.id }}</td>
                </template>
            </el-table-column>

            <el-table-column label="商品名称" min-width="100">
                <template slot-scope="scope">
                    <td>{{ scope.row.product_name }}</td>
                </template>
            </el-table-column>

            <el-table-column label="商品图片" min-width="100">
                <template slot-scope="scope">
                    <img :src="scope.row.product_image" alt="商品图片" style="width: 100px; height: 100px;">
                </template>
            </el-table-column>

            <el-table-column label="商品价格" min-width="100">
                <template slot-scope="scope">
                    <td>{{ scope.row.price }}</td>
                </template>
            </el-table-column>
            <el-table-column label="商品类型" min-width="100">
                <template slot-scope="scope">
                    <td>{{ scope.row.product_type }}</td>
                </template>
            </el-table-column>
            <el-table-column label="商品描述" min-width="100">
                <template slot-scope="scope">
                    <td>{{ scope.row.product_desc }}</td>
                </template>
            </el-table-column>
            <el-table-column label="创建时间" min-width="100">
                <template slot-scope="scope">
                    <td>{{ scope.row.create_time }}</td>
                </template>
            </el-table-column>
            <el-table-column label="商品品牌" min-width="100">
                <template slot-scope="scope">
                    <td>{{ scope.row.product_brand }}</td>
                </template>
            </el-table-column>

            <el-table-column label="操作" fixed="right" width="150">
                <template slot-scope="scope">
                    <div style="display: flex; justify-content: space-around;">
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </div>
                </template>
            </el-table-column>

        </el-table>

        <!-- 分页组件，:current-page：当前页，
     :page-size：每页显示的记录数，
     :total：总记录数，
     :layout：分页布局，
     :background：背景颜色，
     :prev-text：上一页按钮文字，
     :next-text：下一页按钮文字，
     :hide-on-single-page：只有一页时隐藏分页组件，
     :current-change：当前页码变化时触发的函数 -->
        <el-pagination :current-page="current" :page-size="pageSize" :total="total" background
            layout="prev, pager, next" @current-change="loadProduct">
        </el-pagination>
    </div>
</template>

<script>
export default {
    name: "ProductView",
    data() {
        return {
            //存储用户列表的数组
            products: [],
            //控制对话框显示，默认为隐藏
            dialogFormVisible: false,
            //表单标签的宽度
            formLabelWidth: '120px',
            // 存储用户信息的对象，包括用户ID，用户名，用户密码，用户类型
            product: { id: '', product_name: '', product_image: '', price: '', product_type: '', product_desc: '', create_time: '', product_brand: '' },
            // 操作类型，用于区分保存或更新操作
            operateType: '',
            // 分页信息，总记录行数
            total: 0,
            // 当前页码
            pageSize: 5,
            // 每页显示的记录数
            current: 1,
        }
    },
    methods: {
        // 加载用户列表
        loadProduct(current) {
            this.current = current;
            this.$http.get('product?m=page&current=' + this.current + '&pageSize=' + this.pageSize)
                .then(resp => {
                    if (resp.data.data) {
                        console.log("商品数据绑定", resp.data.data);
                        this.products = resp.data.data.records.map(product => ({
                            ...product,
                            create_time: new Date(product.create_time).toISOString().slice(0, 19).replace('T', ' ')
                        }));
                        this.total = resp.data.data.total;
                    }
                });
        },
        // 编辑用户
        handleEdit(index, row) {
            console.log("编辑商品信息", index, row);
            this.operateType = 'update';
            this.dialogFormVisible = true;
            this.product = JSON.parse(JSON.stringify(row));

            // 确保 create_time 是字符串类型
            if (this.product.create_time) {
                this.product.create_time = new Date(this.product.create_time).toISOString().slice(0, 19).replace('T', ' ');
            } else {
                this.product.create_time = '';
            }
        },
        // 删除商品信息，列表索引，被选中删除的用户信息
        handleDelete(index, row) {
            // 打印索引和用户信息以便调试
            console.log("删除商品订单信息", index, row);
            // 使用confirm对话框提示用户是否确定删除
            this.$confirm('是否确定删除？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 发送删除请求
                this.$http.post('product?m=delete&id=' + row.id).then(resp => {
                    // 处理后台返回的结果
                    if (resp.data.data == true) {
                        // 重新加载用户列表
                        this.loadProduct(this.current);
                        // 显示成功消息
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 保存用户信息
        // 在 handleSave 方法中，格式化 create_time
        handleSave() {
            // 格式化 create_time
            if (this.product.create_time) {
                this.product.create_time = new Date(this.product.create_time).toISOString().slice(0, 19).replace('T', ' ');
            }

            // 根据操作类型来判断是添加还是更新数据
            if (this.operateType == 'save') {
                // 添加用户，发送保存请求
                this.$http.post('product?m=save', this.$qs.stringify(this.product))
                    .then(resp => {
                        // 判断是否保存成功
                        if (resp.data.data == true) {
                            // 打印保存成功信息，便于调试
                            console.log('保存订单商品信息成功');
                            // 重新加载用户列表
                            this.loadProduct(this.current);
                        }
                    });
            } else {
                // 更新用户，发送更新请求
                this.$http.post('product?m=update', this.$qs.stringify(this.product))
                    .then(resp => {
                        // 打印请求结果，便于调试
                        console.log('更新订单商品信息', resp.data);
                        // 判断是否更新成功
                        if (resp.data.data == true) {
                            // 打印更新成功信息，便于调试
                            console.log('更新订单商品信息');
                            // 重新加载用户列表
                            this.loadProduct(this.current);
                        }
                    });
            }
            // 关闭对话框
            this.dialogFormVisible = false;
        },
        // 处理上传成功的回调
        handleAvatarSuccess(res, file) {
            // 假设后端返回的数据结构与 UploadView.vue 类似
            this.product.product_image = res.data; // 根据实际情况调整这里的 res.data
        },
        // 上传之前的检查
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isPNG = file.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG && !isPNG) {
                this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return (isJPG || isPNG) && isLt2M;
        },
        // 清除对话框数据
        handleClose() {
            // 重置用户信息对象和操作类型
            this.product = { id: '', product_name: '', product_image: '', price: '', product_type: '', product_desc: '', create_time: '', product_brand: '' };
            // 清空操作类型
            this.operateType = ''
        }
    },
    //页面挂载钩子
    mounted() {
        this.loadProduct(this.current)
    }
}
</script>

<style scoped>
.el-table .warning-row {
    background: oldlace;
}

.el-table .success-row {
    background: #f0f9eb;
}

.el-table .cell {
    white-space: normal !important;
    word-break: break-all;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.operation-buttons {
    display: flex;
    flex-direction: column;
    /* 修改为竖直排列 */
    align-items: center;
}

.operation-buttons .el-button {
    margin: 5px 0;
    /* 调整按钮之间的间距 */
}
</style>